<template>
  <div>
    <el-card>
      <el-form label-width="120px" :model="formData">
        <el-form-item label="姓名">
          <el-input v-model="formData.name" style="width:300px" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formData.mobile" style="width:300px" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="头像" prop="photo">
              <!-- 放置上传图片 -->
              <image-upload ref="staffList" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button type="primary" @click="btnok">确定</el-button>

          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <el-table border :data="list">
        <el-table-column label="序号" sortable="" type="index" />
        <el-table-column label="姓名" sortable="" prop="name" />
        <el-table-column label="手机号" sortable="" prop="mobile" />
        <el-table-column label="头像" sortable="" prop="photo">
          <template slot-scope="{ row }">
            <img :src="row.photo" alt="" style="height:100px">
          </template>
        </el-table-column>
        <el-table-column label="操作" sortable="" fixed="right" width="280">
          <template>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
  </div>
</template>
<script>
import ImageUpload from './components/ImageUpload'
export default {
  components: {
    ImageUpload
  },
  data() {
    return {
      list: [{
        name: '小黑',
        mobile: '13112345678',
        photo: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2F37%2Fe8%2F2c%2F37e82c9568c76ef3a2ba54cb857164e8.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644316492&t=31783f87f2b1bbd9a6c4dc35f46f31e4' }],
      formData: {
        name: '',
        mobile: '',
        photo: ''
      }

    }
  },
  methods: {
    btnok() {
      // 上传的图片添加到fromData的photo中
      this.formData.photo = this.$refs.staffList.fileList[0].url
      // 再向表格中添加
      this.list.push({ ...this.formData })
      // 清空表单
      this.$refs.staffList.fileList = []
      this.formData = {
        name: '',
        mobile: '',
        photo: ''
      }
    }

  }

}
</script>

<style>

</style>
